<template>
  <div class="home-container">
    <!-- 广告轮播图 -->
    <n-carousel autoplay dot-type="line" class="carousel">
      <img
          class="carousel-img"
          src="/images/banner1.jpg"
          alt="法律咨询服务"
      >
      <img
          class="carousel-img"
          src="/images/banner2.jpg"
          alt="劳动仲裁服务"
      >
      <img
          class="carousel-img"
          src="/images/banner3.jpg"
          alt="合同审查服务"
      >
    </n-carousel>

    <!-- 服务统计 -->
    <n-grid :cols="isMobile ? 2 : 4" :x-gap="12" class="stats-section">
      <n-grid-item v-for="stat in statistics" :key="stat.label">
        <n-card class="stat-card">
          <div class="stat-number">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </n-card>
      </n-grid-item>
    </n-grid>

    <!-- 服务九宫格 -->
    <div class="services-section">
      <h2 class="section-title">我们的服务</h2>
      <n-grid :cols="isMobile ? 1 : 3" :x-gap="12" :y-gap="12">
        <n-grid-item v-for="service in services" :key="service.title">
          <n-card class="service-card" hoverable @click="handleServiceClick(service)">
            <template #cover>
              <div class="service-icon">
                <n-icon size="48">
                  <component :is="service.icon"/>
                </n-icon>
              </div>
            </template>
            <template #header>
              <div class="service-header">
                <span class="service-title">{{ service.title }}</span>
                <n-tag type="success" size="small">
                  ¥{{ service.price }}起
                </n-tag>
              </div>
            </template>
            <div class="service-desc">{{ service.description }}</div>
            <template #footer>
              <n-button type="primary" block @click="handleServiceClick(service)">
                立即行动
              </n-button>
            </template>
          </n-card>
        </n-grid-item>
      </n-grid>
    </div>

    <!-- 流程说明 -->
    <div class="process-section">
      <h2 class="section-title">服务流程</h2>
      <n-steps :current="1" class="process-steps">
        <n-step title="信息收集" description="收集案件和当事人信息"/>
        <n-step title="确定诉求" description="明确仲裁请求和赔偿金额"/>
        <n-step title="撰写文书" description="编写仲裁申请书及附件"/>
        <n-step title="文书审核" description="编写仲裁申请书及附件。"/>
        <n-step title="持续服务" description="审核文书内容和格式"/>
      </n-steps>
    </div>

    <!-- 用户评价 -->
    <div class="testimonials-section">
      <h2 class="section-title">用户评价</h2>
      <n-grid :cols="isMobile ? 1 : 3" :x-gap="12">
        <n-grid-item v-for="review in testimonials" :key="review.name">
          <n-card class="testimonial-card">
            <template #header>
              <div class="review-header">
                <n-avatar round :src="review.avatar"/>
                <span class="reviewer-name">{{ review.name }}</span>
              </div>
            </template>
            <div class="review-content">{{ review.content }}</div>
            <template #footer>
              <n-rate readonly :value="review.rating"/>
            </template>
          </n-card>
        </n-grid-item>
      </n-grid>
    </div>

    <n-modal
        v-model:show="showContactModal"
        preset="dialog"
        title="法律咨询邮箱"
        content="法律问题？请发送邮件至467643531@qq.com获取专业解答。"
        positive-text="确认"
        negative-text="取消"
        @positive-click="submitCallback"
        @negative-click="cancelCallback"
    />

  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {
  DocumentTextOutline,
  ChatbubbleEllipsesOutline,
  BusinessOutline,
  PeopleOutline,
  CheckmarkCircleOutline,
  StarOutline
} from '@vicons/ionicons5'

const router = useRouter()

const showContactModal = ref(false)

// 统计数据
const statistics = ref([
  {label: '服务用户', value: '1,000+'},
  {label: '成功案例', value: '800+'},
  {label: '专业律师', value: '30+'},
  {label: '好评率', value: '99%'}
])

// 服务列表
const services = ref([
  {
    title: '劳动仲裁代写',
    icon: DocumentTextOutline,
    price: 4.9,
    path: '/arbitration',
    description: '依托先进的AI技术，我们确保您的权益得到全面保护，同时提供全网最精准的文案服务。'
  },
  {
    title: '法律咨询',
    icon: ChatbubbleEllipsesOutline,
    price: 49,
    path: '/consultation',
    description: '资深律师在线解答，为您提供专业的法律建议'
  },
  {
    title: '合同审查',
    icon: BusinessOutline,
    price: 99,
    path: '/contract',
    description: '全面审查合同条款，规避潜在风险，保护您的合法权益'
  }
])

// 用户评价
const testimonials = ref([
  {
    name: '张先生',
    avatar: 'https://via.placeholder.com/100/18a058/FFFFFF?text=张',
    content: '专业服务，解决了我的劳动纠纷难题。',
    rating: 5
  },
  {
    name: '李女士',
    avatar: 'https://via.placeholder.com/100/2080f0/FFFFFF?text=李',
    content: '及时咨询，律师建议实用，很有帮助。',
    rating: 5
  },
  {
    name: '王先生',
    avatar: 'https://via.placeholder.com/100/f0a020/FFFFFF?text=王',
    content: '合同审查细致，发现并修正了多项风险。',
    rating: 4
  }
])

const isMobile = ref(false)

onMounted(() => {
  const clientWidth = document.documentElement.clientWidth
  isMobile.value = clientWidth < 768
})

// 处理服务点击
const handleServiceClick = (service) => {
  console.log("---------->handleServiceClick", service)
  if (service.title !== "劳动仲裁代写") {
    showContactModal.value = true
  } else {
    router.push(service.path)
  }
}
</script>

<style scoped>
.home-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel {
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stats-section {
  margin: 48px 0;
}

.stat-card {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #18a058;
}

.stat-label {
  margin-top: 8px;
  color: #666;
}

.section-title {
  text-align: center;
  margin: 48px 0 24px;
  color: #333;
  font-size: 24px;
}

.services-section {
  margin: 48px 0;
}

.service-card {
  height: 100%;
}

.service-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background: #f5f5f5;
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-title {
  font-size: 18px;
  font-weight: 500;
}

.service-desc {
  margin: 16px 0;
  color: #666;
  min-height: 60px;
}

.process-section {
  margin: 48px 0;
  padding: 48px;
  background: #f5f5f5;
  border-radius: 8px;
}

.process-steps {
  max-width: 800px;
  margin: 0 auto;
}

.testimonials-section {
  margin: 48px 0;
}

.testimonial-card {
  height: 100%;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reviewer-name {
  font-weight: 500;
}

.review-content {
  margin: 16px 0;
  color: #666;
  font-style: italic;
}

@media (max-width: 768px) {
  .home-container {
    padding: 16px;
  }

  .carousel {
    height: 200px;
  }

  .stats-section {
    margin: 24px 0;
  }

  .service-icon {
    height: 80px;
  }

  .service-desc {
    min-height: 40px;
  }

  .process-section {
    padding: 24px;
  }

  .testimonial-card {
    margin-bottom: 24px;
  }
}
</style>
